<!--采购订单统计-->
<template>
  <div class="morelist">
    <div class="filter-top" @click="showFilter = true"> 
      请选择筛选条件 <div class="isclick"></div> 
    </div>
     <div class="data-list">
      <div class="data-header">
        <div class="data-header-title">店铺 </div>
        <div class="data-header-title">库存（包） </div>
        <!-- <div class="data-header-title">金额</div> -->
        <div class="data-header-title">日期</div>
      </div>
      <div class="data-row" v-for="(item,index) in list" :key="index" :style="{ 'background': index % 2 == 0 ? '#fff' : '#f5f5f5'}" @click="goStockDetail(item.storeId,item.type)">
        <div class="data-row-item">{{item.storeName}} </div>
        <div class="data-row-item">{{item.stock}} </div>
        <!-- <div class="data-row-item">{{item.orderAmount}} </div> -->
        <div class="data-row-item add-timer">{{item.statDate}} </div>
      </div> 

      <nodata v-if="!list || list.length==0" />

      <!-- <div class="view-more isbtn" @click="getMore" v-if="pageNum <= totalPage">
        <span>加载更多</span>  <div class="isclick"></div>
      </div>
      <div class="view-more isbtn" v-else>
        <span>没有更多内容啦~</span>  
      </div> -->
      <div class="height88"></div>
      <div class="bootm">
        <span>合计:</span>{{getAllstock}}
      </div>
    </div>
    <!--  下拉筛选 -->
    <top-filter :showFilter.sync="showFilter">
      <div class="filter-content" @click.stop>
        <group>
          <datetime title="日期" v-model="starTime" :end-date="defult_endTime"></datetime>
        </group> 

        <div class="row-box">
          <group>
            <popup-picker  title="城市" v-model="city" show-name :data="cityList" placeholder="请选择城市"></popup-picker>
          </group> 
        </div>
        <div class="btn-box">
          <div class="reset btn" @click="reset">重置</div>
          <div class="confirm btn" @click="confirmSelect">确认</div>
        </div>
      </div>
    </top-filter>
    <!-- 下拉筛选end -->

    <!-- <x-dialog :show.sync="dialogShow" class="dialog"  hide-on-blur>
      <div class="dialog-content">
        <row title="设备门店" :value="list[viewIndex] && list[viewIndex].deviceSn"></row>
        <row title="商品" :value="list[viewIndex]&&list[viewIndex].goodsName"></row>
        <row title="金额" :value="list[viewIndex]&&list[viewIndex].orderAmount + ''"></row>
        <row title="销售时间" :value="list[viewIndex]&&list[viewIndex].orderTime" noborder></row>
      </div>
    </x-dialog> -->
  </div> 
</template>

<script> 
import { Search } from 'vux'
import api from '@/api/api.js' 
import row from '@/components/row'
import topFilter from '@/components/topFilter'
import { Datetime, Group, PopupPicker,XDialog } from 'vux'
import nodata from '@/components/nodata'
import util from '@/utils/util.js'
export default {
  name: 'more',
  components: {
    Search,
    topFilter,
    XDialog,
    Datetime, 
    row,
    Group, 
    nodata,
    PopupPicker
  },
  data () {
    return { 
      city:[],
      starTime:'',
      dialogShow:false,
      viewIndex:0,
      list:[],
      searchText:'',
      showFilter: false,
      defult_endTime:'',
      totalPage:0,
      "pageSize": 20,
      "pageNum": 1, 
      cityList:[],
      
    }
  },
  computed:{
    getAllstock(){
      let stock = 0;
      this.list.forEach(item=>{
        stock += item.stock
      })
      return stock
    },
  },
  created (){
    this.getAmouthDay();
  },
  mounted () {  
    this.getCity();
    this.getData(this.$route.query)
  },
  methods: {
    getCity(){ 
      api.publick.cityList({},res=>{
        let cityArr = res.result.map(item=>{
          return {name: item.city,value:item.city}
        })
        this.cityList = [cityArr]; 
      })
    },
    goStockDetail(id,type){
      this.$router.push({path:'/shopStockDailyDetail',query:{id,type}})
    },
    // 筛选默认最近一个月
    getAmouthDay(){ 
      let today= new Date();
      let mounth_ago =  new Date(today.getTime()-(1*24*60*60*1000)); 
      this.starTime = util.timeTampt(mounth_ago); 
      this.defult_endTime = util.timeTampt(today); 
    },
    confirmSelect(){
      this.pageNum = 1;
      this.getData();
       this.showFilter=false;
    },
    showDialog(index){
      this.viewIndex = index;
      this.dialogShow = true;
    },
    //重置筛选
    reset(){
      this.searchText = '';
      this.city=[];
      this.getAmouthDay();
    },
    filterShow(){
      this.showFilter = !this.showFilter
    },
    getMore(){
      this.getData();
    },
    resultClick(e){
      console.log(e)
    },
    getData(params){
      params = params || {}; 
      if(this.starTime){
        params.date = this.starTime;
      } 
      if(this.city[0]){
        params.city = this.city[0];
      } 
      api.data.stockDay(params,res=>{ 
        this.list = res.result; 
      })
    },
    onSubmit(e){
      console.log(e)
    }
  }
}
</script>
 
<style lang="less" scoped> 
.bootm{
  height: .88rem;
  padding: 0 .24rem;
  display: flex;
  align-items: center;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 7.5rem;
  box-shadow: 0px 0px .30rem .08rem rgba(2, 2, 2, 0.09);
  span{
    color: #999;
    margin-right: .12rem;
  }
}
.height88{
  height: .88rem;
}
.morelist{
  padding-top: 44px;
}
.dialog-content{
  background: #fff;
  border-radius: 8px;
  min-height: 200px;
}
/deep/.weui-search-bar__label{
  top: 3px;
}
.city-tex{
  margin-top: .20rem;
}
.filter-content{
  background: #fff;
  width: 100%;
  padding: 20px;
  /deep/.weui-search-bar:before{
    height: 0;
  }
  /deep/.weui-search-bar::after{
    height: 0;
  }
  .row-box{
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .filter-title{
    padding-top: 20px;

  }
  .data-time-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

/deep/.weui-search-bar,.vux-search-fixed{
  position: relative !important;
  padding: 0;
  background: #fff;
}
/deep/.weui-search-bar__cancel-btn{
  text-decoration: none;
}
/deep/.weui-search-bar:after{
  display: none;
}
/deep/.weui-search-bar::before{
  display: none;
}
.btn-box{
  display: flex;
  width: 100%;
  margin-top: 20px;
  height: 44px;
  justify-content: space-between; 
  .btn{
    border-radius: 8px;
    height: 44px;
    width: 45%;
    line-height: 44px;
    text-align: center;
    color: #fff;
    &:active{
      opacity: .7;
    }
    &.reset{
      background: #ddd;
    }
    &.confirm{
      background: #FABE00;
    }
  }
}
.filter-top{
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 3;
  .isclick{
    border-width: 0 1px 1px 0;
    margin-top: -6px;
  }
}
.data-list{
    padding-top: 48px;
  .data-header{
    height: 48px;
    line-height: 48px;
    font-weight: bold;
    background: #ddd;
    display: flex;
    position: fixed;
    top: 44px;
    left: 0;
    width: 100%;
    .data-header-title{
      flex: 1;
      text-align: center;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }
  .data-row{
    height: 48px;
    line-height: 48px;
    display: flex;
    &-item{
      flex: 1;
      text-align: center;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }
}
.view-more{
  color: #999;
  display: flex;
  align-items: center;
  height: 44px;
  justify-content: center; 
  .isclick{
    // border-width: 0 1px 1px 0;
    // margin-top: -6px;
  }
}
.add-timer{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
